<template>
  <view class="messageDetails">
    <view class="box">
      <view class="content-view">
        <view class="title">
          {{ title }}
        </view>
        <view class="time">
          {{ createTime }}
        </view>
        <view class="p">
          {{ content }}
          <text @click="call">{{ phone }}</text>
        </view>
        <view v-if="title === '集合通知' && !isRead" class="btn flex" @click="submit">
          报道
        </view>
      </view>
    </view>

    <view v-if="title === '集合通知'" class="box">
      <view class="map-title">
        集合地点图片
      </view>
      <view class="map-image">
        <image :src="assemblePlaceUrl" mode="widthFix"></image>
      </view>
    </view>
    <zy-modal></zy-modal>
  </view>
</template>

<script>
import {
  readMessage,
  queryByUserPhoneMessageInfo,
  queryMessageInfoByMessageId
} from '@/api/login.js'

export default {
  data() {
    return {
      content: '',
      title: '',
      createTime: '',
      messageAssembleId: '',
      assemblePlaceUrl: '',
      isRead: 0,
      type: '',
      messageId: '',
      phone: ''
    }
  },
  onLoad({
           id,
           type
         }) {
    this.type = type;
    let newsinfo = uni.getStorageSync('newsinfo');
    if (newsinfo) {
      this.messageAssembleId = newsinfo.id;
      this.messageId = newsinfo.messageId;
      this.init();
      return;
    }
  },
  methods: {
    async init() {
      let newsinfo = ''
      if (this.type !== 'group') {
        newsinfo = await queryByUserPhoneMessageInfo({
          id: this.messageAssembleId
        })
      } else {
        newsinfo = await queryMessageInfoByMessageId({
          messageId: this.messageAssembleId
        });
        newsinfo.messageAssemble = newsinfo;
      }


      let {
        messageAssemble,
        createTime,
        type,
        isRead
      } = newsinfo;
      this.isRead = isRead;
      this.createTime = createTime;
      if (messageAssemble) {
        if (messageAssemble.type === 2) {
          this.title = '消息通知'
          this.content = messageAssemble.content;
          this.readMsg();
          return;
        }
        if (messageAssemble.type === 0) {
          this.title = '行程通知'
          this.content =
              `${newsinfo.name}，您有一个旅行计划，将于${newsinfo.messageAssemble.departTime}启程，请您提前准备好行李和心情，在${messageAssemble.assemblePlaceName}集合，开启愉快的旅程。`;
          this.readMsg();
          return;
        }
        if (messageAssemble.type === 1) {
          this.title = '集合通知';
          this.content =
              `${messageAssemble.name}发起了集合点名消息，请前往${messageAssemble.assemblePlaceName}进行集合，请抵达后点击已到按钮报道，如有疑问，请致电：`
          this.phone = messageAssemble.phone
          this.assemblePlaceUrl = messageAssemble.assemblePlaceUrl;
          return;
        }
      }
    },
    readMsg() {
      readMessage({
        messageAssembleId: this.messageAssembleId,
        type: this.title === '消息通知' ? 2 : 1
      }).then(res => {
        this.isRead = 1;
        if (this.title === '集合通知') {
          this.toast('报道成功');
        }
        this.$event.notify('changeNewsInfo', {
          updata: this.messageAssembleId
        })
      })
    },
    submit() {
      this.readMsg();
    },
    call() {
      uni.makePhoneCall({
        phoneNumber: this.phone
      })
    },
  }
}
</script>

<style>
page {
  min-height: 100vh;
  background: rgba(235, 236, 237, 1);
}
</style>
<style lang="scss" scoped>
.messageDetails {
}

.box {
  width: 690rpx;
  margin: 30rpx auto;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 12px -3px rgba(0, 0, 0, 0.25);

}

.content-view {
  padding: 30rpx;

  .title {
    font-size: 36rpx;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    text-align: center;
    margin-bottom: 10rpx;
  }

  .time {
    text-align: center;
    font-size: 20rpx;
    font-weight: 400;
    color: rgba(56, 56, 56, 1);
    text-align: center;
    margin-bottom: 30rpx;
  }

  .p {
    font-size: 30rpx;
    line-height: 60rpx;
    color: rgba(56, 56, 56, 1);
    margin-bottom: 60rpx;
  }

  .btn {
    width: 380rpx;
    height: 90rpx;
    background: url('https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/baodao-btn.png') no-repeat 0 0 / 100% 100%;
    margin: 0 auto;
    font-size: 0;
  }
}


.map-title {
  font-size: 36rpx;
  font-weight: 500;
  line-height: 52rpx;
  color: rgba(2, 99, 75, 1);
  padding: 24rpx 0 8rpx;
  text-align: center;
  margin-bottom: 20rpx;
}

.map-image {
  width: 640rpx;
  margin: 0 auto;
  padding-bottom: 24rpx;

  image {
    width: 100%;
    border-radius: 20rpx;
  }
}
</style>
